<template>
  <div class="home">
    <div class="banner">
      <div class="banxin">
        <img src="../assets/images/home/banner.png" alt="" />
      </div>
    </div>
    <div class="bg">
      <Title :src="Recommend" title="精品推荐" />
      <ProductList :arr="records" />
      <Title :src="Hot" title="热门兑换" />
      <img src="" alt="" />
      <ProductList :arr="hot" />
    </div>

    <div class="jifen">
      <Title :src="Integral" title="积分攻略" />
      <ul class="banxin tanxin">
        <li>
          <h4>签到得积分</h4>
          <div class="btn">去签到</div>
        </li>
        <li>
          <h4>购课得积分</h4>
          <div class="btn">去购课</div>
        </li>
        <li>
          <h4>推荐得积分</h4>
          <div class="btn">去推荐</div>
        </li>
        <li>
          <h4>拼团得积分</h4>
          <div class="btn">去拼团</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Title from "@/components/home/Title.vue";
import ProductList from "@/components/Product.vue";
import { GetJingPingDataApi, GetHotDataApi } from "@/request/api";
export default {
  data() {
    return {
      Recommend: require("../assets/images/home/Recommend.png"),
      Hot: require("../assets/images/home/hot.png"),
      Integral: require("../assets/images/home/integral.png"),
      records: [],
      hot: [],
    };
  },
  components: {
    Title,
    ProductList,
  },
  created() {
    //精品推荐接口
    GetJingPingDataApi().then((res) => {
      if (res.data.code === 0) {
        this.records = res.data.data.data.records;
      }
    }),
      //热门兑换接口
      GetHotDataApi().then((res) => {
        if (res.data.code === 0) {
          this.hot = res.data.data.data.records;
        }
      });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.home {
  .banner {
    margin-bottom: 30px;
  }
  .ad {
    display: block;
    margin-bottom: 30px;
  }
  .bg {
    background: #f5f5f5;
  }
  .jifen {
    li {
      background-size: 100% 100%;
      transition: all 0.5s linear;
      width: 285px;
      height: 168px;
      margin-bottom: 47px;
      padding-left: 20px;
      box-sizing: border-box;
      cursor: pointer;
      color: #fff;
      h4 {
        height: 29px;
        font-size: 30px;
        line-height: 23px;
        margin-bottom: 20px;
        margin-top: 43px;
      }
      .btn {
        width: 96px;
        height: 27px;
        border: 1px solid #ffffff;
        text-align: center;
        line-height: 27px;
      }
      &:nth-of-type(1) {
        background-image: url(../assets/images/home/integral-01.png);
      }
      &:nth-of-type(2) {
        background-image: url(../assets/images/home/integral-02.png);
      }
      &:nth-of-type(3) {
        background-image: url(../assets/images/home/integral-03.png);
      }
      &:nth-of-type(4) {
        background-image: url(../assets/images/home/integral-04.png);
      }
      &:hover {
        background-size: 105% 105%;
      }
    }
  }
}
</style>